<template>
  <div>
    <el-form-item label="边框设置" :class="{ 'mb-24': config.bordered }">
      <el-switch v-model="config.bordered"></el-switch>
    </el-form-item>
    <template v-if="config.bordered">
      <el-form-item label="边框颜色" class="mb-24">
        <div class="d-flex jc-between">
          <ColorSetting v-model="style.borderColor" />
          <div class="d-flex">
            <span class="mr-24">边框厚度</span>
            <div class="border-width-input">
              <el-input-number
                v-model="style.borderWidth"
                :step="1"
                step-strictly
                :min="0"
                :max="999"
                :controls="false"
              ></el-input-number>
              <div class="icon-count-control absCenterY pointer">
                <SvgIcon icon-class="collapse-arrow" class="arrow-top" @click="style.borderWidth += 1"></SvgIcon>
                <SvgIcon icon-class="collapse-arrow" class="arrow-bottom" @click="style.borderWidth -= 1"></SvgIcon>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="圆角半径">
        <div class="border-radius-setting d-flex al-center bd-filt">
          <el-slider
            v-model="style.borderRadius"
            :min="0"
            :max="100"
            :step="1"
            class="flex-1 px-16 bgc-white"
            :show-tooltip="false"
          ></el-slider>
          <div class="slider-input p-r ml-16">
            <el-input-number
              v-model="style.borderRadius"
              :min="0"
              :max="100"
              :step="1"
              :precision="0"
              :controls="false"
            ></el-input-number>
            <i class="unit-percentage absCenterY">%</i>
          </div>
        </div>
      </el-form-item>
    </template>
  </div>
</template>

<script>
  import ColorSetting from './ColorSetting';
  export default {
    components: { ColorSetting },
    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      style() {
        return this.model.style;
      },
      config() {
        return this.model.config;
      }
    }
  };
</script>

<style lang="scss" scoped>
  // 边框宽度设置
  .border-width-input ::v-deep {
    position: relative;

    .el-input-number,
    .el-input {
      width: 77px;
      line-height: 32px;

      .el-input__inner {
        padding-right: 32px;
      }
    }

    .icon-count-control {
      right: 16px;
      width: 14px;
      height: 28px;
      font-size: 12px;
      color: #cecece;

      .arrow-top,
      .arrow-bottom {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        &:hover {
          color: map-get($colors, 'theme');
          transition: 0.3s all;
        }
      }

      .arrow-top {
        top: 3px;
        transform: translateX(-50%) rotate(180deg);
      }

      .arrow-bottom {
        bottom: 3px;
      }
    }
  }

  // 透明度/边框配置
  .opacity-setting,
  .border-radius-setting {
    ::v-deep .el-silder {
      border-radius: 2px;

      .el-slider__runway {
        margin: 14px 0;
      }
    }

    .slider-input ::v-deep {
      width: 78px;

      .el-input-number,
      .el-input {
        width: 100%;
      }

      .el-input__inner {
        padding: 0 28px 0 24px;
      }

      .unit-percentage {
        right: 10px;
        line-height: 1;
        color: #cecece;
      }
    }
  }
</style>
